<template>
  <div class="Cabinet">
    <div class="content">

      <form class="row g-2">
        <img src="@/assets/avt.png" alt="" width="99">
        
        <div class="input-group mb-3">
          <span class="input-group-text" id="basic-addon1">Name</span>
          <input type="text" v-model="user.name" class="form-control" placeholder="Имя пользователя"  aria-describedby="basic-addon1">
        </div>

        <div class="input-group mb-3">
          <span class="input-group-text" id="basic-addon1">Email</span>
          <input type="email" v-model="user.email" class="form-control" placeholder="Email адрес"  aria-describedby="basic-addon1">
        </div>

        <div class="input-group mb-3">
          <span class="input-group-text" id="basic-addon1">Age</span>
          <input type="number" v-model="user.age" class="form-control" placeholder="Ваш возраст"  aria-describedby="basic-addon1">
        </div>

        <div class="input-group mb-3">
          <span class="input-group-text" id="basic-addon1">Phone</span>
          <input type="text" class="form-control" v-model="user.phone" disabled placeholder="Номер телефона"  aria-describedby="basic-addon1">
        </div>

        <div class="col-12">
          <button type="submit" :disabled="disable" @click.prevent="editUser" class="btn btn-primary">Редактировать</button>
        </div>
      </form>

    </div>
  </div>
  <div class="message" v-show="message">
    <div class="toast-container position-fixed bottom-0 end-0 p-3">
      <div id="liveToast" class="toast" role="alert" aria-live="assertive" style="display: block;" aria-atomic="true">
        <div class="toast-header">
          <strong class="me-auto">Emron</strong>
          <small>Только что</small>
          <!--          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Закрыть"></button>-->
        </div>
        <div class="toast-body" style="text-align: left;">
          {{ messageText }}
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>

import store from "@/store";
import {onMounted, ref} from "vue";

let user = store.getters.getUserInfo;
const token = store.getters.getToken;
let message = ref(false);
let messageText = ref("");
let disable = ref(false);

onMounted(async () => {
  console.log(await user);
  console.log(window.location.pathname);
  if (await token.length < 10) {
    disable.value = true;
    message.value = true;
    messageText.value = "Пожалуйста авторизуйтесь, через 3 секунды вы будете перенапрвленны";
    setTimeout(() => {
      message.value = false;
      messageText.value = "";
      window.location.pathname = "/";
    }, 3000)
  }
})

const editUser = () => {
  store.dispatch("actUserEdit", user)
}

</script>
<style scoped lang="scss">
.Cabinet {
  margin-top: 55px;

  .content {
    height: 74vh;
    display: flex;
    justify-content: center;
    align-items: center;

    form {
      width: 350px;

      .col-12 {
        display: flex;
        justify-content: left;
        align-items: center;
      }
    }
  }
}
</style>